<template>
	<div class="contain ignore-carbon-top">
		<!-- 名称和横线 -->
		<div class="cTitle">
			<div class="title">设备信息</div>
			<div class="edhengxian"></div>
		</div>
		<!-- 数据项类型和数据值 -->
		<div class="top-img ignore-redd-libs-top">
			<div class="topImg" v-for="item in option" :key="item.id">
				<img :src="comstatic+'/homeImg/' + item.icon + '.png'" alt="图标" class="img" />
				<div class="name2">{{ item.label }}</div>
				<div class="num">
					<span class="shuzi">{{ item.val }}</span>
					<div class="unit">{{ item.unit }}</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import $config from '@/common/config.js';
	export default {
		data() {
			return {
				comstatic: $config.comstatic,
				option: [{
						icon: 'mj',
						label: '设备总数',
						val: 27,
						unit: '台'
					},
					{
						icon: 'ptotal',
						label: '设备尺寸',
						val: '1640*992',
						unit: 'mm'
					},
					{
						icon: 'qingjiao2',
						label: '倾' + '\u3000' + '\u3000' + '角',
						val: 25,
						unit: '°'
					},
					{
						icon: 'fengzhi2',
						label: '峰值功率',
						val: 7.2,
						unit: 'kw'
					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.contain {
		margin: 20px 0 0 0;
		height: calc(100%);

		.top-img {
			box-sizing: border-box;
			width: 100%;
			height: 50%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			padding: 0 16px;

			.topImg {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;

				.img {
					display: flex;
					justify-content: center;
					// width: 40px;
					// width: 2vw;
					width: 4.2vh;
					margin-right: 10px;
				}


				.name2 {
					color: #fff;
					display: flex;
					justify-content: center;
					width: 95px;
					white-space: nowrap;
					// font-size: 0.8vw;
					font-size: 1.7vh;
				}

				.num {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 85px;

					.shuzi {
						color: #93d8ff;
						// font-size: 18px;
						// font-size: 1.1vw;
						font-size: 2.3vh;
						font-family: 'pieFont';
						padding-left: 5px;
					}


					.unit {
						color: #fff;
						margin-left: 4px;
						// font-size: 14px;
						// font-size: 0.8vw;
						font-size: 1.7vh;
						line-height: 36px;
					}
				}
			}

		}

		.cTitle {
			display: flex;
			flex-direction: column;
			// margin-bottom: 20px;
			margin-bottom: 12px;

			.title {
				color: #fff;
				// font-size: 20px;
				font-size: 2vh;
				font-weight: bold;
				margin: 0 0 8px 8px;
			}
		}

		.edhengxian {
			position: relative;
			width: 96%;
			height: 1px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.3);
		}

		.edhengxian::before {
			position: absolute;
			top: -2px;
			left: 0;
			background-color: #94f2ff;
			box-shadow: 0px 0px 5px 1px #e5e9e7;
			content: '';
			height: 4px;
			width: 30px;
			border-radius: 1px;
			z-index: 2;
		}

		.edhengxian::after {
			position: absolute;
			top: -1px;
			right: 0;
			background-color: #76828f;
			opacity: 1;
			content: '';
			height: 3px;
			width: 15px;
			z-index: 2;
		}

	}

	.ignore-carbon-top {
		.top-img {
			.topImg {
				min-width: 80px;

				.unit {
					min-width: 74px;

					div {
						width: 100%;
					}
				}

				.num,
				.unit,
				.name {
					min-height: 28px;
				}
			}
		}
	}
</style>
